<template>
  <basic-dialog
    :visible="visible"
    min-width="700px"
    :is-show-basic-footer="false"
    is-show-close
    @close="visible=false"
    title="关联设备">
    <q-card-section class="margin-b-10">
      <select-input class="margin-b-20" ref="selectInput" :list="searchCondition" @search="inputSearch" @clearSearchVal="clearSearchVal"></select-input>
      <q-table
        style="height: 400px"
        :data="tableDataHandle"
        :columns="columns"
        row-key="id"
        hide-bottom
        separator="cell"
        no-data-label="暂无数据"
        color="primary"
        :pagination="pagination"
      >
        <template v-slot:body-cell-controllerType="{ row }">
          <q-td class="model full-width">
            <div class="table-row model border-bottom flex items-center" :style="{'height': `${row.length*46}px`}">{{ row.controllerType }}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-driver="{ row }">
          <q-td class="model full-width">
            <div v-for="(info, index) in row.info" :key="index" class="table-row model border-bottom flex items-center" :style="{'height': `${info.length*46}px`}">
              {{info.driverName}}
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-device="{ row }">
          <q-td class="model full-width">
            <div v-for="(info, index) in row.info" :key="index">
              <div v-for="(detail, detailIndex) in info.detail" :key="`detail${detailIndex}`">
                <div class="table-row model border-bottom" > {{ detail.device }}</div>
              </div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-index="{ row }">
          <q-td class="model full-width">
            <div v-for="(info, index) in row.info" :key="index">
              <div v-for="(detail, detailIndex) in info.detail" :key="`detail${detailIndex}`">
                <div class="table-row model border-bottom" > {{ detail.index }}</div>
              </div>
            </div>
          </q-td>
        </template>
      </q-table>
    </q-card-section>
  </basic-dialog>
</template>

<script>
import SelectInput from 'src/components/select-input'

export default {
  name: 'device-infos',
  components: {
    SelectInput
  },
  data () {
    return {
      tableDataAll: [
      ],
      columns: [
        { name: 'controllerType', label: '控制器类型', align: 'center', field: 'controllerType' },
        { name: 'driver', label: '对应驱动', align: 'center', field: 'driver' },
        { name: 'device', label: '设备', align: 'center', field: 'device' },
        { name: 'index', label: '序号', align: 'center', field: 'index' }
      ],
      pagination: {
        rowsNumber: 0
      },
      searchCondition: [
        { id: 'deviceNum', name: '设备编号' },
        { id: 'deviceName', name: '设备名称' },
        { id: 'driver', name: '驱动名称' }
      ],
      visible: false,
      searchInfo: {
        type: '',
        val: ''
      }
    }
  },
  computed: {
    tableDataHandle () {
      // 筛选出控制器类型和驱动
      const controllerTypeList = []
      const driverList = []
      this.tableData.forEach(item => {
        if (controllerTypeList.indexOf(item.controllerType) === -1) {
          controllerTypeList.push(item.controllerType)
        }
        if (driverList.findIndex(driver => driver.driverName === item.driver) === -1) {
          driverList.push({ driverName: item.driver, controllerType: item.controllerType })
        }
      })
      const result = controllerTypeList.map(controllerType => {
        // 筛选唯一驱动
        const driverListFilter = driverList.filter(driver => driver.controllerType === controllerType).map(driver => driver.driverName)
        const info = driverListFilter.map(driverName => {
          const detail = this.tableData.filter(item => item.driver === driverName && item.controllerType === controllerType)
          return {
            driverName,
            length: detail.length,
            detail
          }
        })
        return {
          controllerType,
          info: info,
          length: this.tableData.filter(item => item.controllerType === controllerType)?.length
        }
      })
      return result
    },
    tableData () {
      if (this.searchInfo.type && this.searchInfo.val) {
        return this.tableDataAll.filter(item => (item[this.searchInfo.type].toLowerCase()).indexOf(this.searchInfo.val.toLowerCase()) > -1)
      }
      return this.tableDataAll
    }
  },
  methods: {
    showDialog (data) {
      this.visible = true
      this.clearSearchVal()
      this.tableDataAll = data
    },
    // 搜索
    inputSearch (item, searchVal) {
      this.searchInfo.type = item.id
      this.searchInfo.val = searchVal
    },
    clearSearchVal () {
      this.searchInfo.val = ''
      this.searchInfo.type = ''
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.q-table--cell-separator .q-table__middle{
  border-bottom: none;
}
/deep/.q-table th:last-child, .q-table td:last-child{
  padding: 0;
}
/deep/.q-table td:first-child{
  padding-left: 0;
}
.model{
  padding: 0;
  border-bottom: none;
}
.table-row{
  padding: 12px 16px;
}
.border-bottom{
  border-bottom: 1px solid #d3d3d3;
}
</style>
